<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useUserStore } from '@/store/modules/user';
import { fetchPostJoinSociety } from '@/api/public/societyApply'
import { ElMessage } from 'element-plus'
import { fetchGetSocietyInfo } from '@/api/society/index'


let societyInfo = ref({
  name: '',
})
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  societyName: societyInfo.value.name,
  reason: '',//换届原因
  username: undefined, // 新社长账号
  email: undefined,//新社长邮箱
  personId: useUserStore().userInfo.id,
  applyType: 4, // 换届申请
  status:0,
})
const ruleForm2 = reactive({
  societyName: '协会/社团名称（系统自动带出，无需填写）',
  reason: '例：因XXX原因，所有换届',//换届原因
  username: '新任社长的登录账号', // 新社长账号
  email: '新任社长账号绑定的邮箱',//新社长邮箱
  personId: useUserStore().userInfo.id
})
const rules = reactive<FormRules>({
  societyName: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  username: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  reason: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
})

// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      setTimeout(() => {
        fetchPostJoinSociety(ruleForm).then((res) => {
          if (Number(res.code) === 200) {
            ElMessage({
              type: 'success',
              message: res.msg,
            })
          }
        })
      }, 500)
    } else {
      ElMessage({
        type: 'warning',
        message: '请正确填写',
      })
    }
  });
};

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
onMounted(() => {
  getSocietyInfo()
})
// 获取社团信息
const getSocietyInfo = () => {
  const id = useUserStore().userInfo.society.split('-')[1]
  fetchGetSocietyInfo(id).then((res: { data: { name: string; }; }) => {
    ruleForm.societyName=res.data.name
  })
}


</script>
<template>
  <div class="create-society-container">
    <div class="container">
      <div class="container-header-name">社团换届申请</div>
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" label-position="top"
        class="demo-ruleForm" size="default" status-icon>
        <el-form-item label="社团名称" prop="societyName" >
          <el-input v-model="ruleForm.societyName" disabled />
        </el-form-item>
        <el-form-item label="新社长账号" prop="username">
          <el-input v-model="ruleForm.username" clearable />
        </el-form-item>
        <el-form-item label="换届原因" prop="reason">
          <el-input v-model="ruleForm.reason" type="textarea" :rows="4" clearable />
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm(ruleFormRef)" size="large" class="btn-white">重置</el-button>
          <el-button type="primary" size="large" @click="submitForm(ruleFormRef)" class="btn-green">
            提交
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 申请模板 -->
    <div class="container">
      <div class="container-header-name header-disabled">参考模板</div>
      <el-form :model="ruleForm2" :rules="rules" label-width="120px" label-position="top"
        class="demo-ruleForm form-disabled" size="default" status-icon>
        <el-form-item label="社团名称" prop="societyName">
          <el-input v-model="ruleForm2.societyName" disabled />
        </el-form-item>
        <el-form-item label="新社长账号" prop="username">
          <el-input v-model="ruleForm2.username" disabled />
        </el-form-item>
        <el-form-item label="换届原因" prop="reason">
          <el-input v-model="ruleForm2.reason" type="textarea" :rows="4" disabled />
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm(ruleFormRef)" size="large" disabled>重置</el-button>
          <el-button size="large" disabled>
            提交
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.create-society-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;

  .container {
    .container-header-name {
      background: $green;
      height: 6rem;
      line-height: 6rem;
      font-size: 2rem;
      font-weight: 700;
      color: #fff;
      padding: 0 2rem;
    }

    .header-disabled {
      background: #999;
    }

    .demo-ruleForm {
      border: 0.5rem solid $green;
      border-top: none;
      padding: 2rem;

      .el-form-item__content {
        display: grid !important;
      }
    }

    .form-disabled {
      border-color: #999;
    }

    .el-form-item {
      margin-bottom: 2rem;
    }
  }
}
</style>

